<script setup>
import { ref } from 'vue'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import { billGetInfoService } from '@/api/bill.js'
import AcountPopup from '@/components/AcountPopup.vue'
const radio1 = ref('支出')
const dialog = ref()
const loading = ref(false)
const isAccount = ref(true)
const onAcountPopup = () => {
  dialog.value.open({})
}
const dataList = ref()
const getDataList = async () => {
  // loading.value = true
  const res = await billGetInfoService()
  console.log('-------------------------------')
  console.log("数据",res.data)
  dataList.value = res.data.data
  // loading.value = false
  console.log(dataList.value);
}
getDataList()
const onEditBill = (row) => {
  dialog.value.open(row)
}
const onDelBill = (row, $index) => {
  console.log(row, $index);
}
</script>

<template>
  <div class="headers">
    <div :inline="true">
      <el-row>
        <el-col :span="21">
          <el-radio-group fill="#ffbd5a" class="radio" v-model="radio1" size="large">
            <el-radio-button
              fill="#ffbd5a"
              size="small"
              label="支出"
              value="支出"
            />
            <el-radio-button
              fill="ffbd5a"
              size="small"
              label="收入"
              value="收入"
            />
    </el-radio-group>
        </el-col>
        <el-col :span="3">
          <el-button
            @click="onAcountPopup"
            :icon="Plus"
            circle
            color="#ffbd5a"
            size="large"
            class="footer"
          ></el-button>
        </el-col>
      </el-row>
  </div>
  <div class="main" v-if="isAccount">
    <el-table v-loading="loading" :data="dataList" style="width: 100%" header-align="center">
      <el-table-column type="index" align="center" prop="date" label="时间" width="250"></el-table-column>
      <el-table-column align="center" prop="expenditure" label="金额" width="200"></el-table-column>
      <el-table-column align="center" prop="categoryName" label="分类" width="200"></el-table-column>
      <el-table-column align="center" prop="remark" label="备注" width="250"></el-table-column>
      <el-table-column align="center" label="修改" width="70">
        <template #default="{ row, $index}">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditBill(row, $index)"
          ></el-button>
      </template>
      </el-table-column>
      <el-table-column align="center" label="删除">
        <template #default>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelBill(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
  <div class="main" v-else>
    <el-table  v-loading="loading" :data="dataList" style="width: 100%" header-align="center">
      <el-table-column type="index" align="center" prop="date" label="时间" width="250"></el-table-column>
      <el-table-column align="center" prop="income" label="金额" width="200"></el-table-column>
      <el-table-column align="center" prop="categoryName" label="分类" width="200"></el-table-column>
      <el-table-column align="center" prop="remark" label="备注" width="250"></el-table-column>
      <el-table-column align="center" label="修改" width="70">
        <template #default="{ row, $index}">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditBill(row, $index)"
          ></el-button>
      </template>
      </el-table-column>
      <el-table-column align="center" label="删除">
        <template #default>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelBill(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
  </div>
<acount-popup ref="dialog"></acount-popup>
</template>
<style lang="scss" scoped>
.header {
  display: flex;
  height: 100vh;
  .main {
    margin-top: 50px;
  }
}
</style>